<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>管理面板 - 手语识别系统</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
      rel="stylesheet"
    />
    <style>
      .sidebar {
        min-height: 100vh;
        background-color: #343a40;
        color: white;
      }
      .sidebar .nav-link {
        color: rgba(255, 255, 255, 0.75);
      }
      .sidebar .nav-link:hover {
        color: white;
      }
      .sidebar .nav-link.active {
        color: white;
        background-color: rgba(255, 255, 255, 0.1);
      }
      .main-content {
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <!-- 侧边栏 -->
        <div class="col-md-3 col-lg-2 px-0 sidebar">
          <div class="p-3">
            <h4>管理面板</h4>
            <hr />
            <ul class="nav flex-column">
              <li class="nav-item">
                <a class="nav-link active" href="#" data-page="dashboard">
                  <i class="fas fa-tachometer-alt me-2"></i>
                  仪表盘
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#" data-page="signs">
                  <i class="fas fa-hand-paper me-2"></i>
                  手语管理
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#" data-page="categories">
                  <i class="fas fa-folder me-2"></i>
                  分类管理
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#" data-page="users">
                  <i class="fas fa-users me-2"></i>
                  用户管理
                </a>
              </li>
              <li class="nav-item mt-3">
                <a class="nav-link text-danger" href="#" id="logout">
                  <i class="fas fa-sign-out-alt me-2"></i>
                  退出登录
                </a>
              </li>
            </ul>
          </div>
        </div>

        <!-- 主内容区 -->
        <div class="col-md-9 col-lg-10 main-content">
          <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>仪表盘</h2>
            <div class="user-info">
              <span class="me-2">管理员</span>
              <i class="fas fa-user-circle"></i>
            </div>
          </div>

          <!-- 内容区域 -->
          <div id="contentArea">
            <!-- 这里将通过JavaScript动态加载不同页面的内容 -->
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/admin/auth.js"></script>
    <script src="/js/admin/dashboard.js"></script>
    <script src="/js/admin/categories.js"></script>
    <script src="/js/admin/signs.js"></script>
    <script src="/js/admin/users.js"></script>

    <!-- 添加分类的模态框 -->
    <div
      class="modal fade"
      id="addCategoryModal"
      tabindex="-1"
      aria-labelledby="addCategoryModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="addCategoryModalLabel">添加分类</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form id="addCategoryForm">
              <div class="mb-3">
                <label for="addCategoryName" class="form-label">分类名称</label>
                <input
                  type="text"
                  class="form-control"
                  id="addCategoryName"
                  required
                />
              </div>
              <div class="mb-3">
                <label for="addCategoryDescription" class="form-label"
                  >分类描述</label
                >
                <textarea
                  class="form-control"
                  id="addCategoryDescription"
                  rows="3"
                ></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              取消
            </button>
            <button
              type="button"
              class="btn btn-primary"
              onclick="submitAddCategory()"
            >
              保存
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑分类的模态框 -->
    <div
      class="modal fade"
      id="editCategoryModal"
      tabindex="-1"
      aria-labelledby="editCategoryModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="editCategoryModalLabel">编辑分类</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form id="editCategoryForm">
              <input type="hidden" id="editCategoryId" />
              <div class="mb-3">
                <label for="editCategoryName" class="form-label"
                  >分类名称</label
                >
                <input
                  type="text"
                  class="form-control"
                  id="editCategoryName"
                  required
                />
              </div>
              <div class="mb-3">
                <label for="editCategoryDescription" class="form-label"
                  >分类描述</label
                >
                <textarea
                  class="form-control"
                  id="editCategoryDescription"
                  rows="3"
                ></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              取消
            </button>
            <button
              type="button"
              class="btn btn-primary"
              onclick="submitEditCategory()"
            >
              保存更改
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加手语的模态框 -->
    <div
      class="modal fade"
      id="addSignModal"
      tabindex="-1"
      aria-labelledby="addSignModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="addSignModalLabel">添加手语</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form id="addSignForm">
              <div class="mb-3">
                <label for="addSignKeyword" class="form-label">关键词</label>
                <input
                  type="text"
                  class="form-control"
                  id="addSignKeyword"
                  required
                />
              </div>
              <div class="mb-3">
                <label for="addSignCategory" class="form-label">分类</label>
                <select class="form-select" id="addSignCategory" required>
                  <!-- 分类选项将通过JavaScript动态加载 -->
                </select>
              </div>
              <div class="mb-3">
                <label for="addSignVideo" class="form-label">视频文件</label>
                <input
                  type="file"
                  class="form-control"
                  id="addSignVideo"
                  accept="video/*"
                  required
                />
                <div class="form-text">
                  支持mp4、webm格式，建议大小不超过50MB
                </div>
              </div>
              <div class="mb-3">
                <label for="addSignDescription" class="form-label">描述</label>
                <textarea
                  class="form-control"
                  id="addSignDescription"
                  rows="3"
                ></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              取消
            </button>
            <button
              type="button"
              class="btn btn-primary"
              onclick="submitAddSign()"
            >
              保存
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑手语的模态框 -->
    <div
      class="modal fade"
      id="editSignModal"
      tabindex="-1"
      aria-labelledby="editSignModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="editSignModalLabel">编辑手语</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form id="editSignForm">
              <input type="hidden" id="editSignId" />
              <div class="mb-3">
                <label for="editSignKeyword" class="form-label">关键词</label>
                <input
                  type="text"
                  class="form-control"
                  id="editSignKeyword"
                  required
                />
              </div>
              <div class="mb-3">
                <label for="editSignCategory" class="form-label">分类</label>
                <select class="form-select" id="editSignCategory" required>
                  <!-- 分类选项将通过JavaScript动态加载 -->
                </select>
              </div>
              <div class="mb-3">
                <label for="editSignVideo" class="form-label">视频文件</label>
                <input
                  type="file"
                  class="form-control"
                  id="editSignVideo"
                  accept="video/*"
                />
                <div class="form-text">如不更换视频请留空</div>
              </div>
              <div class="mb-3">
                <label for="editSignDescription" class="form-label">描述</label>
                <textarea
                  class="form-control"
                  id="editSignDescription"
                  rows="3"
                ></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              取消
            </button>
            <button
              type="button"
              class="btn btn-primary"
              onclick="submitEditSign()"
            >
              保存更改
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 视频预览的模态框 -->
    <div
      class="modal fade"
      id="videoPreviewModal"
      tabindex="-1"
      aria-labelledby="videoPreviewModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="videoPreviewModalLabel">视频预览</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <video id="videoPlayer" class="w-100" controls>
              <source src="" type="video/mp4" />
              您的浏览器不支持视频播放。
            </video>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑用户模态框 -->
    <div class="modal fade" id="editUserModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">编辑用户</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
            ></button>
          </div>
          <div class="modal-body">
            <form id="editUserForm">
              <input type="hidden" id="editUserId" />
              <div class="mb-3">
                <label for="editEmail" class="form-label">邮箱</label>
                <input
                  type="email"
                  class="form-control"
                  id="editEmail"
                  required
                />
              </div>
              <div class="mb-3">
                <label for="editPassword" class="form-label">新密码</label>
                <input
                  type="password"
                  class="form-control"
                  id="editPassword"
                  placeholder="如不修改密码请留空"
                  autocomplete="new-password"
                />
                <div class="form-text">留空表示不修改密码</div>
              </div>
              <div class="mb-3">
                <label for="editConfirmPassword" class="form-label"
                  >确认新密码</label
                >
                <input
                  type="password"
                  class="form-control"
                  id="editConfirmPassword"
                  placeholder="如不修改密码请留空"
                  autocomplete="new-password"
                />
              </div>
              <div class="mb-3">
                <label for="editUserType" class="form-label">用户类型</label>
                <select class="form-select" id="editUserType">
                  <option value="user">普通用户</option>
                  <option value="admin">管理员</option>
                </select>
                <div
                  id="userTypeHint"
                  class="form-text text-warning"
                  style="display: none"
                >
                  出于安全考虑，不能修改自己的用户类型
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              取消
            </button>
            <button
              type="button"
              class="btn btn-primary"
              onclick="submitEditUser()"
            >
              保存
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
